<template>
  <div class="carts">
    <div class="edit-btn">
      <span
        class="carts-edit"
        @click="edit"
      >{{onEdit?'完成':'编辑'}}</span>
    </div>
    <div class="carts-goods">
      <div
        class="carts-good"
        v-for="(item,index) in goodsArr"
        :key="index"
      >
        <Leftdel
          :id="item.id"
          @handleCancelItem="showMsg(item.id)"
          content="删除"
        >
          <div class="goods-content">
            <!--<checkIcon-->
              <!--@selectChange="(state)=>{checkchange(item.id,state,index)}"-->
              <!--:index="index"-->
              <!--:id="item.id"-->
              <!--:selected="item.selected"-->
            <!--&gt;</checkIcon>-->

            <div class="select-icon-wrapper flex-cont" style="width: .64rem;height: 100%;"
                  @click="checkchange(item.id, item.selected, index)">
              <div class="select-icon" v-if="!item.selected"></div>
              <div class="selected-icon" v-else></div>
            </div>
            <Card
              :imgSrc="item.imageUrl"
              :name="item.productName"
            >
              <div class="item-desc">
                <span class="item-desc-info">{{item.modelName}}</span>
                <span class="item-desc-info">{{item.modelSize}}</span>
              </div>
              <div class="item-price">
                <span class="price-icon">{{returnName(item.productType)}}</span>
                <span class="item-price-num">{{item.salePrice}}</span>
              </div>
              <p class="item-price-del"></p>
              <div class="item-count">
                <div
                  @click="countMin(index,item.id,item.count,item.salePrice, item.selected)"
                  class="count-change"
                >-</div>
                <div class="count-num">{{item.count}}</div>
                <div
                  @click="countAdd(index,item.id,item.count,item.salePrice, item.selected)"
                  class="count-change"
                >+</div>
              </div>
            </Card>
          </div>
        </Leftdel>
      </div>
      <div
        v-if="false"
        class="goods-disabled-title"
       >
        失效商品
        <span
          class="goods-disabled-clear"
          @click="resureClear"
          v-show="onEdit"
        >清空失效商品</span>
        <span
          class="goods-disabled-clear"
          v-show="!onEdit"
        >{{disableGoods.length==0?'无':''}}</span>
      </div>

      <div
        v-if="false"
        class="carts-good"
        >
        <div
          class="goods-item disabled"
          v-for="(item,index) in disableGoods"
          :key="index"
        >
          <Leftdel content="删除">
            <div class="goods-content">
              <img
                class="good-img disable-img"
                :src="item.imageUrl"
              />
              <div class="goods-item-content">
                <p class="item-name">{{item.productName}}</p>
                <div class="item-desc">
                  <span class="item-desc-info">无效</span>
                </div>
              </div>
            </div>
          </Leftdel>
        </div>
      </div>
      <div
        v-if="!goodsArr.length"
        class="no-data"
      >
        当前购物车为空~
      </div>
    </div>
    <div class="carts-options">
      <!--<checkIcon-->
        <!--@selectChange="checkAll"-->
        <!--:selected.sync="selectedAll"-->
      <!--&gt;</checkIcon>-->
      <div class="flex-box-align">
        <div class="select-icon-wrapper flex-cont" @click="checkAll" style="margin-left: .21rem;margin-right: .21rem;">
          <div class="select-icon" v-if="!selectedAll"></div>
          <div class="selected-icon" v-else></div>
        </div>
        <span style="font-size:.26rem">全选</span>
      </div>
      <span
        class="total-price"
        v-show="!onEdit"
      >￥{{totatlPrice}}</span>
      <span
        class="total-price"
        v-show="onEdit"
      ></span>

      <div
        @click="payBtn"
        class="caculate-btn"
        v-show="!onEdit"
      >{{selectArr.length?`结算(${selectArr.length})`:'结算'}}</div>
      <div
        @click="deleteAll"
        class="caculate-btn"
        v-show="onEdit"
      >删除</div>
    </div>
    <tabbar></tabbar>
  </div>
</template>

<script>
import CONSTANT from "../../../wechat/static/constant/urlconstant";
import common from "../../../wechat/static/common/common";
import tabbar from "@/components/common/tabbar.vue";
import checkIcon from "@/components/common/checkIcon.vue";
import Leftdel from "@/components/common/Left-Del.vue";
import Card from "@/components/common/Goods-card.vue";
import { Confirm, TransferDomDirective as TransferDom } from "vux";
import { setTimeout } from "timers";
const testimg1 = require("../../images/test.png");

export default {
  directives: {
    TransferDom
  },
  data() {
    return {
      goodsArr: [],
      disableGoods: [],
      selectArr: [],
      totatlPrice: 0,

      clearShow: false,
      onEdit: false,
      selectedAll: false
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    returnName(val){
      let str;
      if(val == 'RMB'){
        str = '¥  '
      }else if(val == 'GOLD'){
        str = '红包:'
      }else {
        str = '红包:'
      }
      return str
    },
    payBtn(){
      console.log(this.goodsArr,'selectArr')
      if(!this.selectArr.length)return
      let flag = true,str,state = false
      this.goodsArr.map(item=>{
        if(item.selected&&!state){
          if(str){
            state = str == item.productType?false:true
          }else{
            str = item.productType
          }
        }
      })
      // if(state){
      //   this.$vux.toast.show({
      //     type: "cancel",
      //     text: '红包和红包商品不能同时购买'
      //   });
      //   return
      // }
      if (flag) {
        let ids = this.selectArr.join(',')
        this.$router.push({
          path: "account",
          query: {type:'carts',ids:ids}
        })
      }

    },
    showMsg(val) {
      let url = CONSTANT.LIST.cartDelete;
      common.deleteRequest(url, val, res => {
        this.$vux.loading.hide();
        if (res.code == 200) {
          this.goodsArr.map((item, index) => {
            if (item.id == val) {
              this.goodsArr.splice(index, 1);
              if (item.selected) {
                this.totatlPrice = (Number(this.totatlPrice) - Number(item.salePrice * item.count)).toFixed(2)
              }
            }
          });
        }
      });
    },
    deleteAll(){
      if(!this.selectArr.length)return
      let param = this.selectArr.join(',')
      this.$vux.loading.show({
        text: "删除中"
      });
      let url = CONSTANT.LIST.cartDelete;
      common.deleteRequest(url, param, res => {
        this.$vux.loading.hide();
        if (res.code == 200) {
          this.$vux.toast.show({
            type: "success",
            text: "删除成功"
          });
          this.goodsArr = []
          this.getList();
        }
      });
    },  
    getList() {
      this.$vux.loading.show({
        text: "加载中"
      });
      let param = {
        pageIndex: 1,
        pageSize: 1000
      };
      let url = CONSTANT.LIST.cartPage;
      common.post(url, param, res => {
        this.$vux.loading.hide();
        if (res.code == 200) {
          let arr = res.data.bussData;
          arr.map(item => {
            if (item.isInvalid == "n") {
              item.selected = false;
              this.goodsArr.push(item);
            } else {
              this.disableGoods.push(item);
            }
          });
        }
      });
    },
    countAdd(index, id, num,price, selected) {
      num += 1;
      this.goodsArr[index].count += 1;
      if (selected) {
        this.totatlPrice = (Number(this.totatlPrice) + Number(price)).toFixed(2)
      }
      this.numChange(id, num);
    },
    countMin(index, id, num,price, selected) {
      if (num < 2) return;
      num -= 1;
      this.goodsArr[index].count -= 1;
      if (selected) {
        this.totatlPrice = (Number(this.totatlPrice) - Number(price)).toFixed(2)
      }
      this.numChange(id, num);
    },
    numChange(id, num) {
      let url = `${CONSTANT.LIST.cartUpdate}${id}/${num}`;
      common.get(url, "", res => {});
    },
    checkchange(id, val, index) {
      if(this.goodsArr[index].selected) {
        this.selectArr.splice(this.selectArr.indexOf(id), 1);
        this.totatlPrice = (Number(this.totatlPrice) - Number(this.goodsArr[index].salePrice * this.goodsArr[index].count)).toFixed(2)
      } else {
        this.totatlPrice = (Number(this.totatlPrice) + Number(this.goodsArr[index].salePrice * this.goodsArr[index].count)).toFixed(2)
        this.selectArr.push(id)
      }
      this.goodsArr[index].selected = !this.goodsArr[index].selected
      this.selectedAll = this.goodsArr.every( item => {
        return item.selected
      })
    },
    checkAll() {
      this.selectArr = []
      this.totatlPrice = 0
      if (this.selectedAll) {
        this.goodsArr.forEach(item => {
          item.selected = false;
        });
      } else {
        this.goodsArr.forEach(item => {
          item.selected = true;
          this.totatlPrice = (Number(this.totatlPrice)+Number(item.salePrice * item.count)).toFixed(2)
          this.selectArr.push(item.id)
        });
      }
      this.selectedAll = !this.selectedAll
    },
    resureClear() {
      this.clearShow = true;
    },
    edit() {
      this.onEdit = !this.onEdit;
    },
    linkTo(link) {
      this.$router.push(link);
    },
    onConfirm() {
      this.disableGoods = [];
    }
  },
  components: {
    tabbar,
    checkIcon,
    Leftdel,
    Card,
    Confirm
  }
};
</script>

<style lang="less">
body,
html {
  height: 100%;
}
.edit-btn {
  z-index: 5;
  width: 100%;
  height: 0.8rem;
  background:linear-gradient(-90deg,rgba(255,151,86,1),rgba(255,94,114,1));
  line-height: 0.8rem;
  position: fixed;
  top: 0;
  float: right;
  .carts-edit {
    position: absolute;
    font-size: 0.3rem;
    font-family: PingFang-SC-Medium;
    color: rgba(253, 253, 253, 1);
    right: 0.32rem;
  }
}
.no-data {
  text-align: center;
  font-size: 0.28rem;
  font-family: PingFang-SC-Bold;
  color: rgba(153, 153, 153, 1);
  margin-top: 40%;
}
.carts {
  margin-top: 0.8rem;
  width: 100%;
  height: 100%;
  background: #f7f7f7;
  // .goods-item-content .item-name{
  //       height: .75rem;
  // }
  .carts-goods {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-bottom: 2.4rem;
    overflow: auto;
    .goods-disabled-title {
      padding-left: 0.58rem;
      background: white;
      margin-top: 0.16rem;
      height: 0.91rem;
      font-family: PingFang-SC-Light;
      color: rgba(0, 0, 0, 1);
      line-height: 0.91rem;
      border: 0.01rem solid rgba(175, 175, 175, 0.28);
      font-size: 0.27rem;
      .goods-disabled-clear {
        float: right;
        margin-right: 0.28rem;
        font-size: 0.25rem;
        font-family: PingFang-SC-Light;
        color: #FF7268;
      }
    }
    .carts-good {
      height: 2.74rem;
      .goods-item {
        overflow: hidden;
        background: white;
        position: relative;
        z-index: 2;
      }
    }
  }
  .goods-item.disabled {
    padding-left: 0.58rem;
    .disable-img {
      opacity: 0.19;
    }
  }
}
.carts-options {
  z-index: 999;
  border-top: 1px solid rgba(234, 234, 234, 1);
  background: white;
  position: fixed;
  height: 0.98rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  left: 0;
  right: 0;
  bottom: 0.99rem;
  .vux-check-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 0.67rem;
    position: relative;
    height: 0.5rem;
  }
  .total-price {
    margin-left: 0.29rem;
    font-size: 0.3rem;
    font-family: PingFang-SC-Light;
    color: #FF7268;
  }

  .caculate-btn {
    width: 2.5rem;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background:linear-gradient(-90deg,rgba(255,151,86,1),rgba(255,94,114,1));
    color: white;
    position: absolute;
    right: 0;
    font-size: 0.28rem;
    font-family: PingFang-SC-Light;
  }
}
.goods-content {
  background: white;
  position: relative;
  height: 2.74rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  z-index: 2;
  .select-icon-wrapper{
    margin-left: .1rem;
  }
  .good-img {
    width: 2.12rem!important;
    height: 2.13rem!important;
    background-size: 100% 100%;
    margin-left: .1rem;
  }
  .goods-item-content {
    position: relative;
    z-index: 2;
    background: white;
    height: 2.32rem;
    padding: 0.21rem 0.23rem 0.2rem 0.21rem;
    overflow: hidden;
    text-overflow: ellipsis;

    .item-desc {
      .item-desc-info {
        font-size: 0.26rem;
        font-family: PingFang-SC-Light;
        color: rgba(158, 158, 158, 1);
        line-height: 0.5rem;
        margin-right: 0.2rem;
      }
    }
    .item-price {
      margin-top: 0.1rem;
      color: #FF7268;
      .item-price-num {
        font-size: 0.31rem;
        font-family: PingFang-SC-Light;
        line-height: 0.52rem;
      }
    }
    .item-price-del {
      font-size: 0.23rem;
      font-family: PingFang-SC-Light;
      text-decoration: line-through;
      color: rgba(153, 153, 153, 1);
      line-height: 0.4rem;
    }
    .item-count {
      position: absolute;
      bottom: 0.19rem;
      right: 0.29rem;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      text-align: center;
      height: 0.47rem;
      line-height: 0.47rem;

      .count-change {
        color: rgba(175, 175, 175, 1);
        width: 0.54rem;
        border: 0.02rem solid rgba(175, 175, 175, 1);
        font-size: 0.3rem;
      }
      .count-num {
        width: 1.1rem;
        border-top: 0.02rem solid rgba(175, 175, 175, 1);
        border-bottom: 0.02rem solid rgba(175, 175, 175, 1);
        font-size: 0.28rem;
      }
    }
  }
  ::-webkit-scrollbar {
    display: none !important;
  }
}
.weui-dialog {
  width: 6.75rem !important;
  max-width: 7.5rem !important;
  height: 2.54rem;
  box-sizing: border-box;
  border-radius: 0.1rem !important;
}
.weui-dialog__bd {
  min-height: 0 !important;
  padding: 0 !important;
  display: flex;
  height: 1.55rem;
  flex-direction: column;
  justify-content: center;
}
.weui-dialog__ft {
  box-sizing: border-box;
  height: 0.99rem !important;
}
.dialog-content {
  font-size: 0.36rem;
  font-family: PingFangSC-Thin;
  color: black;
  letter-spacing: 0.02rem;
}
.weui-dialog__btn {
  -webkit-tap-highlight-color: rgba(126, 86, 198, 0.8) !important;
}
.weui-dialog__btn_default {
  background:linear-gradient(-90deg,rgba(255,151,86,1),rgba(255,94,114,1));
  font-size: 0.36rem;
  font-family: PingFangSC-Thin;
  color: rgba(252, 252, 252, 1) !important;
}
.weui-dialog__btn_primary {
  background: rgba(204, 175, 255, 1);
  font-size: 0.36rem;
  color: #fcfcfc !important;
}
</style>